<template>
  <v-autocomplete
    :loading="autocompleteLoading"
    :items="zmList"
    variant="underlined"
    @update:model-value="handleChangeSelectValue"
    :model-value="payload"
    color="rgb(var(--v-title))"
    base-color="rgb(var(--v-title))"
    class="text-title"
  >
    <template #item="{ item, props }">
      <v-list-item v-bind="props">
        <template #title> {{ item.title }}</template>
        <template #subtitle>
          {{ item.raw.shijiName }}
        </template>
      </v-list-item>
    </template>
    <template #no-data>
      <div class="text-center text-title">没有找到相关数据</div>
    </template>
    <template #clear="{ props }">
      <div class="flex items-center mt-1" v-bind="props">
        <j-icon size="12">mdi-close</j-icon>
      </div>
    </template>
  </v-autocomplete>
</template>
<script setup>
import { asyncComputed } from "@vueuse/core";
import { useModel, inject, computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
const emit = defineEmits(["update:modelValue", "change"]);
const props = defineProps({
  modelValue: { type: String, default: "" },
});
const payload = useModel(props, "modelValue", emit);
const sgbList = inject("sgbList");
const shijiList = asyncComputed(
  async () => {
    return await store.dispatch("sgb/getNavJiList");
  },
  [],
  {
    lazy: true,
    shallow: true,
  }
);
const zmList = computed(() => {
  if (!(Array.isArray(shijiList.value) && shijiList.value.length > 0)) {
    return [];
  }

  function findShijiName(id) {
    const res = shijiList.value.find((it) => it.id == id);
    if (res) return res.name;
  }
  const arr = sgbList.value
    .filter((item) => {
      // 把原创赞美和默想音乐去掉
      return Boolean(findShijiName(item.shijiIndex)) && item.shijiIndex != 4;
    })
    .map((item) => {
      return {
        ...item,
        title: `${item.xuhao.toString().padStart(3, "0")}.${item.mulu}`,
        value: item._id,
      };
    });

  return arr;
});
const autocompleteLoading = computed(() => {
  return zmList.length === 0;
});

function handleChangeSelectValue(value) {
  payload.value = value;
  emit("change", value);
}
</script>
<style scoped></style>
